<template>
  <div class="batch-wrapper">
    <p v-if="batchType==='associate'">
      <i18n path="product.qrcode.text.text2">
        <span class="batch-num" place="qrcodeNum"> {{counts.unbindQrcodeCount}} </span>
        <span class="batch-num" place="productNum"> {{counts.unbindProductCount}} </span>
      </i18n>
    </p>
    <div class="batch-content">
      <div class="stepper" :style="stepperStyle">
        <div>1</div>
        <p></p>
        <div>2</div>
        <p v-if="batchType==='associate'"></p>
        <div v-if="batchType==='associate'">3</div>
      </div>
      <ul class="batch-content-text" v-if="batchType==='associate'">
        <li>{{ $t('product.qrcode.text.text3', { count: counts.unbindQrcodeCount }) }}</li>
        <li>{{ $t('product.qrcode.text.text4', { count: counts.unbindProductCount }) }}</li>
        <i18n path="product.qrcode.text.text5" tag="li">
          <a place="importTemplate" href="/product/qrcode/association/download?mode=0" class="batch-href">{{ $t('common.base.importModal.importTemplate') }}</a>
        </i18n>
      </ul>
      <ul class="batch-content-text" v-else-if="batchType==='update'">
        <i18n path="product.qrcode.text.text6" tag="li" v-if="!multipleSelection.length">
          <span place="count" class="batch-num"> {{counts.bindQrcodeCount}} </span>
        </i18n>
        <i18n path="product.qrcode.text.text7" tag="li" v-if="multipleSelection.length">
          <span place="count" class="batch-num"> {{multipleSelection.length}} </span>
        </i18n>
        <li>{{ $t('product.qrcode.text.text8') }}</li>
      </ul>
      <div class="batch-content-btn" v-if="batchType==='associate'">
        <a href="/product/qrcode/association/download?mode=1">{{$t('common.base.download')}}</a>
        <a href="/product/qrcode/association/download?mode=2">{{$t('common.base.download')}}</a>
      </div>
      <div class="batch-content-btn" v-else-if="batchType==='update'">
        <a @click="downloadBind">{{$t('common.base.download')}}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'batch-dialog',
  props:{
    batchType:{
      type:String,
      default:''
    },
    counts:{
      type:Object,
      default:()=>{}
    },
    multipleSelection:{
      type:Array,
      default:()=>[]
    }
  },
  computed:{
    stepperStyle(){
      return this.batchType==='associate'?'height:98px;':'height:60px;'
    }
  },
  methods:{
    // 下载已关联二维码
    downloadBind(){
      let data;
      const len=this.multipleSelection.length;
      if(len){
        data={data:this.multipleSelection.map(item=>item.id).join(','),count:len,exportType:'exportSelect'}
      }else{
        data={count:this.counts.bindQrcodeCount,exportType:"exportAll",data:{isAdvanced:0,productId:"",ids:[],pageSize:10,orderDetail:{},sortBy:{},state:'1',keyword:"",pageNum:1,productName:"",qrcodeId:""}}
      }
      window.location.href=`/product/qrcode/association/update/download?data=${encodeURI(JSON.stringify(data))}`
    },
  }
}
</script>

<style lang="scss" scoped>
.batch-tooltip{
  p{
    margin-bottom: 5px;
  }
}
.batch-wrapper{
  p{
    margin-bottom: 0;
  }
  .batch-num{
    color:$color-warning;
  }
  .batch-content{
    display: flex;
    margin-top: 10px;

    .stepper{
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      div{
        width: 22px;
        height: 22px;
        font-size: 14px;
        border: 2px solid #000;
        border-radius: 50%;
        text-align: center;
        line-height: 18px;
      }
      p{
        width: 0;
        border-left: 2px solid $color-border-l1;
        height: 20px;
      }
    }
    .batch-content-text{
      padding-left: 0;
      flex:1;
      margin-left: 10px;
      margin-bottom: 0;
      li{
        height: 38px;
        line-height: 22px;

        .batch-href{
          color:$color-primary;
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }
    .batch-content-btn{
      a{
        color:$color-primary;
        margin:0;
        display: block;
        height: 36px;
        padding-top: 0;
        font-size: 14px;
        line-height: 26px;
        cursor: pointer;
        span{
          padding-top: 0;
        }
      }
    }
  }
}

::v-deep .el-dialog__header{
  background-color: $bg-color-l2;
  padding-top: 10px;

  .el-dialog__headerbtn{
    top: 0;
  }
}
::v-deep .el-dialog__body{
  padding: 10px 20px;
}
::v-deep .el-dialog__footer{
  border-top: 1px solid $color-border-l2;
  padding-bottom: 10px;
}
</style>